<template>
  <view class="toolbar">
	  <u-grid class="grid" :col="3" :border="false">
	  <view class="images">
		 <image class="user-images" src="/static/aidex/images/user01.png" @click="previewImage('/static/aidex/images/user01.png')"></image> 
	  </view>
	  <view class="images">
		 <image class="user-images" src="/static/aidex/images/user02.png" @click="previewImage('/static/aidex/images/user02.png')"></image>
	  </view>
	  <view class="images">
		 <image class="user-images" src="/static/aidex/images/user03.png" @click="previewImage('/static/aidex/images/user03.png')"></image> 
	  </view>
	  <view class="images">
	  	 <image class="user-images" src="/static/aidex/images/user04.png" @click="previewImage('/static/aidex/images/user04.png')"></image>	  
	  </view>
	  </u-grid>
  </view>
</template>

<script>
  export default {
    methods: {
      previewImage(url) {
        uni.previewImage({
          current: url,
          urls: ['/static/aidex/images/user01.png', '/static/aidex/images/user02.png', '/static/aidex/images/user03.png', '/static/aidex/images/user04.png'],
          indicator: true
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
@import 'index.scss';
	.images{
		// width: 30%;
		// height:30%;
		margin: 8px;
	}
	.user-images{
		width: 200rpx;
		height:200rpx;
		margin-right: 8px;
	}
</style>